<template>
  <!-- <div v-if="echartsData.length != 0"> -->
  <div style="height: 450px;width: 850px;margin-left:10px" id="officialSquib"></div>
  <!-- </div> -->
  <!-- <div v-else>
     <el-empty description="暂无数据" />
      </div> -->
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts';
import bus from '../tools/eventBus'
import { PostMonitorhistory } from '../../src/http/http'

const LowlimitData = ref([])
const echartsData = ref([])
const HighlimitName = ref(null)
const Highlimit = ref([])
const Highlimittime = ref([])
const echartsValue = ref([])
const dateRange = ref([]);
const startTime = ref(null);
const endTime = ref(null);
onMounted(() => {
// 默认展示当天日期的开始和结束时间
const today = new Date();
const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0); // 今天的开始时间 00:00:00
const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59, 999); // 今天的结束时间 23:59:59.999
const value1 = ref([startDate, endDate]);
const TimeValue = value1.value.map(timeString => {
    const date = new Date(timeString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，+1调整为1-12
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`; // 格式化为 YYYY-MM-DD
})

dateRange.value = TimeValue

// console.log(startTime.value = TimeValue[0],
// endTime.value = TimeValue[1], 'TimeValue');


  // echarts1()
})


bus.on('echartsSoure', (data) => {
  // console.log(data,'data');
  PostMonitorhistory({
    "startTime": startTime.value,
    "endTime": endTime.value ,
    "stationKey": "HD72_22041_A5",
    "monitorType": "2"
  }).then((res) => {
    // console.log(res.data.returnValue.result,'实时监测数据');
    res.data.returnValue.result.forEach(a => {
      // console.log(a.value);
      Highlimittime.value.push(a.value)
    })
    // console.log(Highlimittime.value.map(Number), '实时监测数据1');
   const echartsValue= Highlimittime.value.map(Number)
   echarts1(data,echartsValue)
  })
 
  // console.log(data, 'data');
  // echartsData.value = data
})
function echarts1(data,b) {
  // console.log(data.echartsData, data.echartsName, b,'data');
  LowlimitData.value = []
  Highlimit.value = []
  HighlimitName.value = data.echartsName
  // console.log(data.echartsData, 'HighlimitName.value');
  data.echartsData.forEach(i => {
    i.forEach(e => {
      // console.log(e.lowlimit);
      LowlimitData.value.push(e.lowlimit)
      Highlimit.value.push(e.highlimit)
    })
  });
  // console.log( '低限：', LowlimitData.value,'高限：', Highlimit.value);

  // 提取 value1 到 value23 的值

  var chartDom = document.getElementById('officialSquib');
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    color: ["#D53A35", "#E98F6F", "#6AB0B8", "#334B5C"],
    tooltip: {
      trigger: "axis",
    },
    grid: {
      top: "6%",
      bottom: "30%",
      left: "4%",
      right: "5%",
      containLabel: true,
    },
    legend: [
      {
        type: "plain",
        icon: "rect",
        bottom: "18%",
        left: "center",
        itemWidth: 16,
        itemHeight: 12,
        itemGap: 38,
        data: ["高限", "低限", HighlimitName.value],
      },
      {
        type: "plain",
        icon: "rect",
        bottom: "10%",
        left: "center",
        itemWidth: 16,
        itemHeight: 12,
        itemGap: 38,
        data: ["SO2", "PM10", "CO"],
      },
    ],
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#AAA",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#AAAAAA",
      },
      // data: ["00:00", "03:00", "06:00", "09:00", "12:00", "15:00", "18:00", '21:00'],
      data: [ '01:00','02:00','03:00',"04:00", '05:00',"06:00",'07:00','08:00', "09:00",'10:00', '11:00',"12:00",'13:00','14:00', "15:00",'16:00', '17:00',"18:00", '19:00','20:00','21:00','22:00','23:00','00:00',],
    },
    yAxis: {
      name: "",
      type: "value",
      // min: 0.3,
      // max: 0.8,
      // interval: 0.025,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#AAA",
        formatter: function (value) {
          return value + ' Mpa';
        }
      },
      splitLine: {
        lineStyle: {
          type: "dotted",
          color: "#AAA",
        },
      },
    },
    series: [
      {
        name: "高限",
        type: "line",
        // stack: "总量",
        // data:  [0.230, 0.230, 0.380, 0.3, 0.310, 0.430, 0.230, 0.330],
        data: Highlimit.value.map(Number),
      },
      {
        name: "低限",
        type: "line",
        // stack: "总量",
        // data:   [0.130, 0.230, 0.180, 0.4, 0.210, 0.330, 0.230, 0.330, 0.230, 0.280, 0.18, 0.310],
        data: LowlimitData.value.map(Number),
      },
      {
        name: HighlimitName.value,
        type: "line",
        // stack: "总量",
        // data: [0.330, 0.330, 0.380, 0.3, 0.310, 0.330, 0.330, 0.330, 0.330, 0.380, 0.3, 0.310],
        data:b,
      },
    ],
  };
  option && myChart.setOption(option);

}
</script>
